<!--
// +----------------------------------------------------------------------
// | Copyright (c) 2017 https://gitee.com/honoryao All rights reserved.
// +----------------------------------------------------------------------
// | Author: honoryao <2463523099@qq.com>
// +----------------------------------------------------------------------
// | Time: 2018/6/8   
// +----------------------------------------------------------------------
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
<h1>v-for</h1>
<hr>
<div id="app">
    <ul>
        <li v-for="item in sortItems">
            {{item}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="(student,index) in sortStudent">
           {{index}}: {{student.name}} - {{student.age}}
        </li>
    </ul>
</div>

<script src="../assets/js/vue.js"></script>
<script>
    var app= new Vue({
        el:'#app',
        data:{
            items:[99,45,32,41,50],
            student:[
                {name:'honoryao', age:20, head:19},
                {name:'honoryao2', age:30, head:19},
                {name:'honoryao3', age:15, head:19}]
        },
        computed:{
            sortItems:function () {
                return this.items.sort(sortNumber);
            },
            sortStudent:function () {
                return sortByKey(this.student,'age');
            }
        }
    });
    function sortNumber(a,b) {
        return a-b;
    }

    //数组对象方法排序:
    function sortByKey(array,key){
        return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
        });
    }
</script>
</body>
</html>